<template>
    <div class="comp-pay-dialog" id="compConfirmDialog">
        <modal :show="true" :width="400">
            <validator :rules="rules" :parent="_self">
                <form class="m-form-dialog" name="form" action="javascript:;">
                    <div class="modal-header">
                        <a href="javascript:;" class="close" @click="hide()"><span>&times;</span></a>
                        <span class="modal-title">確認支付？</span>
                    </div>
                    <div class="modal-body">
                        <span class="modal-body-text">請確認您已按照要求完成支付，方可點擊。（未支付狀態下點擊確認支付會造成客訴處理並且降低您的信用評分）</span>
                        <div class="col-row">
                            <div class="col-input">
                                <input type="password"
                                       class="fn-block"
                                       autocomplete="off"
                                       disableautocomplete
                                       ref="input"
                                       id="payPwd"
                                       name="paypwd"
                                       :placeholder="$t('common.assetPassRequireTip')"
                                       v-model="form.paypwd">
                                <div class="ui-tip"></div>
                            </div>
                            <div class="btn-group">
                                <button type="submit"
                                        class="ui-btn binds"
                                        v-if="isRequesting === false"
                                        @click="submit()">{{$t('common.confirm')}}</button>
                                <button type="submit"
                                        class="ui-btn"
                                        disabled
                                        v-if="isRequesting === true">{{$t('common.waiting')}}...</button>
                            </div>
                        </div>
                    </div>
                </form>
            </validator>
        </modal>
    </div>
</template>
<script type="text/babel">

    import modal from '../../../../../grsc-base/component/Modal.vue';
    import Validator from '../../../../../grsc-base/component/Validator/main';
    import service from '../service';

    export default {
        components: {
            modal,
            Validator
        },
        data() {
            return {
                form: {
                    paypwd: ''
                },
                rules: {
                    paypwd: {
                        required: true,
                        requiredTip: '請輸入資金密碼'
                    }
                },
                isRequesting: false
            };
        },
        props: ['currentOrder'],
        created() {

        },
        mounted(){
            $(this.$refs.input).focus();
        },
        methods: {
            submit(){
                if (this.rules.$checkAll() === false) {
                    return;
                }

                this.isRequesting = true;

                let param = {
                    transOrderId: this.currentOrder.transOrderId
                };
                let header = {
                    'pay-password':this.form.paypwd
                };

                service.buyOrderPay(param,header).done(rep => {
                    if (rep.code === window.CODE.SUCCESS) {
                        this.hide();
                        window.success(this.$t('common.success'));
                    }else if (rep.code === window.CODE.PAY_PWD.CODE) {
                        let num = rep.data.num;
                        if (3 - num > 0) {
                            this.rules.paypwd.$setError(this.$t('common.IncorrectAssetPassTip',{num: 3-num}));
                        } else {
                            this.rules.paypwd.$setError(window.CODE.PAY_PWD_LOCK[this.$i18n.locale]);
                        }
                    } else if (rep.code === window.CODE.PAY_PWD_LOCK.CODE) {
                        this.rules.paypwd.$setError(window.CODE.PAY_PWD_LOCK[this.$i18n.locale]);
                    } else {
                        window.error(rep.msg);
                    }
                }).always(() => {
                    this.isRequesting = false;
                });
            },

            hide() {
                this.$emit('hide');
            }
        }
    }
</script>

<style lang="sass" rel="stylesheet/scss">
    .comp-pay-dialog .modal .modal-dialog {
        .modal-body{
            padding: 0 0 32px;
            display: flex;
            flex-direction: column;
            &-text{
                padding: 8px 24px 32px;;
            }
        }
    }
</style>